<!DOCTYPE html5>
<html>
<head>
{% load static %}
    <title>{{title}}</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block jquery %}
    <script src="/static/js/jquery.js"></script>
    {% endblock %}
    {% block bootstrap %}
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}" />
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap-tags/css/bootstrap-tags.css' %}" />
    <script src="/static/bootstrap-tags/js/bootstrap-tags.js"></script>
    {% endblock %}
    {% block defaultcss %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
    {% endblock %}
    {% block extrahead %}
    {% endblock %}
</head>
<body>
<div class="container-fluid">
    {% block header %}
        <h1>{% if title %}{{title}}{% else %}untitled{% endif %}</h1>
    {% endblock %}
</div>
<div class="container-fluid">
  <div class="row">
    <div id="sidenav" class="col-sm-2 sidenav">
    {% block nav %}
    <ul class="nav nav-pills nav-stacked">
        <li><a href="{% url "media_list" %}">Index</a></li>
        {% if request.user.is_authenticated %}
        <li><a href="{% url "media_new" %}">Upload</a></li>
        {% else %}
        <li><a href="/accounts/login">Log in</a></li>
        {% endif %}
    </ul>
    <form action="/media/search" method="GET">
        <div class="input-group">
            <input type="text" name="q" class="form-control" placeholder="Search videos">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">🔍</button>
            </span>
        </div>
    </form>
    {% endblock %}
    </div>

    <div id="content" class="col-sm-10">
    {% block content %}No content.{% endblock %}
    </div>
  </div>
</div>

<footer class="container-fluid">
  <p>All material uploaded is licensed Creative Commons Attribution-Share Alike.</p>
</footer>

</body>
</html>
